<script>
import closeIcon from "../assets/close.svg"
import dateUtils from "@/utils/dateUtils"
import store from "@/store"
import { studyRoomActionType } from "@/store/modules/studyRoom"

export default {
  name: "studyReport",
  data() {
    return {
      closeIcon,
    }
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    close() {
			//返回到指定页面
			const pageUrl = store.getters[studyRoomActionType.getters.fromPage]
			if (pageUrl) {
				uni.reLaunch({ url: pageUrl })
				store.commit(studyRoomActionType.mutations.fromPage, null)
			} else {
				//返回到自习室列表页面
				uni.reLaunch({ url: "/studyRoom/pages/studyRoomList/index" })
			}
      this.$refs.popup.close()
    },
  },
  props: {
    details: Object,
    currentStudyTime: Number, //当前学习时长
  },
  computed: {
    targetDurationObj() {
      return dateUtils.formatTimeObject2(this.details.targetDuration)
    },
    currentStudyTimeObj() {
      return dateUtils.formatTimeObject2(this.currentStudyTime)
    },
  },
}
</script>

<template>
  <uni-popup ref="popup" type="bottom" :is-mask-click="false">
    <view class="popup-container">
      <image :src="closeIcon" class="close-btn" @click="close"></image>
      <view class="title">自习报告</view>
      <view class="description">恭喜你已经完成学习任务啦，撒花~</view>

      <view class="content">
        <view class="item">
          <view class="label">学习目标：</view>
          <view class="value">{{ details.studyGoal }}</view>
        </view>

        <view class="item">
          <view class="label">学习计划：</view>
          <view class="value">{{ details.studyPlan }}</view>
        </view>

        <view class="item">
          <view class="label">目标时长：</view>
          <view class="value">{{ `${targetDurationObj.h} 时 ${targetDurationObj.m} 分` }}</view>
        </view>

        <view class="item">
          <view class="label">自习时长：</view>
          <view class="value">{{ `${currentStudyTimeObj.h} 时 ${currentStudyTimeObj.m} 分` }}</view>
        </view>
      </view>

      <view class="confirm-btn d-flex align-center justify-center" @click="close">确认</view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-container {
  background: var(--background-color);
  padding: 80rpx;
  border-radius: 50rpx 50rpx 0 0;
  position: relative;
  > .close-btn {
    position: absolute;
    right: 30rpx;
    top: 40rpx;
    width: 50rpx;
    height: 50rpx;
  }

  > .title {
    font-size: 40rpx;
    font-weight: 500;
  }

  > .description {
    margin-top: 10rpx;
    font-size: 30rpx;
    color: var(--text-color-light);
  }

  > .content {
    margin-top: 50rpx;
    background: #f1f1f1;
    padding: 40rpx;
    font-size: 30rpx;
		max-height: 50vh;
		overflow-y: auto;
    > .item {
      display: flex;
      &:not(:first-child) {
        margin-top: 40rpx;
      }
      > .value {
        margin-left: 10rpx;
        width: 0;
        flex: 1;
        color: var(--text-color-light);
				// 文本溢出部分自动换行
				white-space: normal;
				word-wrap: break-word;
				word-break: break-all;
      }
    }
  }

  > .confirm-btn {
    margin-top: 30rpx;
    font-size: 32rpx;
    margin-left: auto;
    margin-right: auto;
    width: 400rpx;
    height: 80rpx;
    background: #2cb980;
    color: white;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
}
</style>
